<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="/manager/index::head">
</head>

<body>
    <!-- 导航栏 -->
    <ul class="layui-nav" th:replace="/manager/index::nav">
    </ul>

    <div>
        <div style="text-align: center;background-color: #4191C2;color: white;height: 150px;">
            <h1 style="padding: 50px">🧾图书流动日志</h1>
        </div>
        <!-- 新版 -->
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="table" data-toolbar="#toolbar" data-search="true" data-show-refresh="true"
                    data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true"
                    data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true"
                    data-click-to-select="true" data-detail-formatter="detailFormatter" data-minimum-count-columns="2"
                    data-show-pagination-switch="true" data-pagination="true" data-id-field="id"
                    data-page-list="[5,10, 25, 50, 100, all]" data-show-footer="true" data-side-pagination="client"
                    data-url="/records" data-response-handler="responseHandler">
                </table>
            </div>
        </div>
    </div>
    <script>
        layui.use(['layer'], function (args) {
            var layer = layui.layer;
            var form = layui.form;
            form.on('submit(formDemo2)', function (data) {
                $.post("/book/update", data.field, function (data) {
                    if (data.code === "200") {
                        layer.msg("修改用户成功！");
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        layer.msg(data.msg);
                    }
                })
                return false;
            });
        });

        // 获取组件
        var $table = $('#table')
        var $remove = $('#remove')

        // 处理远程响应的数据，可以指定要在表格显示的数据
        function responseHandler(res) {
            return res.data;
        }


        // 按钮点击事件
        window.operateEvents = {
            // 移除
            'click .remove': async function (e, value, row, index) {
                layer.confirm('确定要删除这记录吗？', {
                    btn: ['是的', '取消']
                }, function () {
                    $.get("/user/delete/" + row.bname, function (data) {
                        if (data.code === "200") {
                            layer.msg('删除成功');
                            refresh();
                        }
                    })
                }, function () {
                });
            },
        }
        // 表格初始化
        function initTable() {
            $table.bootstrapTable('destroy').bootstrapTable({
                exportDataType: 'all',
                height: 550,
                locale: $('#locale').val(),
                columns: [
                    [
                        {
                            title: '借阅凭证ID',
                            field: 'id',
                            align: 'center',
                            valign: 'middle',
                            sortable: true,

                        },
                        {
                            title: '用户名',
                            field: 'username',
                            sortable: true,
                            align: 'center'
                        },
                        {
                            title: '书名',
                            field: 'bookName',
                            align: 'center',
                            valign: 'middle',
                            sortable: true,

                        },
                        {
                            title: '借书时间',
                            field: 'borrowTime',
                            sortable: true,
                            align: 'center'
                        },
                        {
                            title: '还书时间',
                            field: 'returnTime',
                            align: 'center',
                            valign: 'middle',
                            sortable: true,

                        }
                    ]
                ]
            })
        }

        $(function () {
            initTable();
            $('#locale').change(initTable)
        })
        function refresh() {
            $table.bootstrapTable('refresh');
        }
    </script>

</body>

</html>